export default function GiftPanel({ visible, onClose, onSend, balance, giftList, onRechargeClick }) {
  if (!visible) return null;
  return (
    <div style={{
      position: 'fixed', left: 0, right: 0, bottom: 0, top: 0, background: 'rgba(0,0,0,0.4)', zIndex: 10001,
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center'
    }}>
      <div style={{
        width: '100%', maxWidth: 430, background: '#222', borderTopLeftRadius: 18, borderTopRightRadius: 18,
        padding: '18px 16px 12px 16px', minHeight: 180, position: 'relative'
      }}>
        <div style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 18, color: '#fff', marginBottom: 8 }}>礼物</div>
        <button onClick={onClose} style={{
          position: 'absolute', right: 12, top: 10, background: 'none', border: 'none', fontSize: 22, color: '#888', cursor: 'pointer'
        }}>×</button>
        <div style={{ marginBottom: 10, color: '#fff', fontSize: 15 }}>余额：{balance}币</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 10 }}>
          {giftList.map((gift, i) => (
            <div key={i}
              onClick={() => onSend(gift)}
              style={{
                border: '1px solid #ff2d55',
                borderRadius: 10,
                padding: '10px 18px',
                cursor: 'pointer',
                background: '#fff0f5',
                minWidth: 80,
                textAlign: 'center'
              }}>
              <div style={{ fontSize: 24 }}>{gift.icon}</div>
              <div style={{ color: '#ff2d55', fontWeight: 'bold', fontSize: 16 }}>{gift.name}</div>
              <div style={{ color: '#888', fontSize: 13 }}>{gift.price}币</div>
            </div>
          ))}
        </div>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginTop:16}}>
          <button onClick={onRechargeClick} style={{
            background: 'linear-gradient(90deg,#ff2d55,#ff5e3a 80%)',
            color: '#fff',
            border: 'none',
            borderRadius: 18,
            padding: '8px 28px',
            fontWeight: 'bold',
            fontSize: 16,
            boxShadow: '0 2px 12px #ff2d5540',
            cursor: 'pointer',
            marginLeft: 4
          }}>充值</button>
        </div>
      </div>
    </div>
  );
} 